<template>
  <basic-dialog
    class="basic-drawer"
    title="证书详情"
    :visible="visible"
    :width="1000"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :has-footer="false"
    @open="handleOpen"
    @closed="handleClose"
  >
    <section class="flex items-center justify-between mb-4">
      <el-radio-group v-model="activeName" size="large" class="radio-content">
        <el-radio-button value="detail">证书信息</el-radio-button>
        <el-radio-button value="cert">证书</el-radio-button>
        <el-radio-button value="secretKey">私钥</el-radio-button>
      </el-radio-group>
      <el-button
        v-if="activeName === 'cert' && certRecord?.pem"
        v-copy:both="certRecord?.pem"
        link
        type="primary"
        >复制</el-button
      >
      <el-button
        v-if="activeName === 'secretKey' && certRecord?.private_key"
        v-copy:both="certRecord?.private_key"
        link
        type="primary"
        >复制</el-button
      >
    </section>
    <cert-info v-if="activeName === 'detail'" :record="certRecord" />
    <cert-detail v-else-if="activeName === 'cert'" :record="certRecord" />
    <secret-key-detail v-else :record="certRecord" />
  </basic-dialog>
</template>
<script lang="ts" setup>
import type { CertDetailModel, CertModel } from '@/apis/model/cert'

import CertDetail from './components/CertDetail.vue'
import CertInfo from './components/CertInfo.vue'
import SecretKeyDetail from './components/SecretKeyDetail.vue'
interface IProps {
  visible: boolean
  record: CertModel
  loading?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  loading: false
})
// 刷新表格事件
interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'update:loading', value: boolean): void
  (event: 'refresh'): void
  (event: 'refresh-row', row: CertModel): void
}
const emit = defineEmits<IEmit>()
const certRecord = ref<CertDetailModel>()
const activeName = ref('detail')

//弹窗打开
const handleOpen = () => {
  getCertApi({ id: props.record?.id! }).then(res => {
    certRecord.value = res || {}
    if (res.status !== props.record.status) {
      emit('refresh-row', res)
    }
  })
}

//弹窗关闭
const handleClose = () => {
  emit('update:visible', false)
  activeName.value = 'detail'
}
</script>

<style lang="scss" scoped>
.custom-tabs {
  :deep(.el-tabs__nav-wrap)::after {
    height: 0px;
  }
}
</style>
